<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>打字练习</title>
    <style>
        body {
            text-align: center;
        }

        #char {
            width: 500px;
            height: 500px;
            /* 设置边框、宽高、样式 */
            border: 4px solid yellow;
            margin: 0 auto;
            /* 设置边框圆角半径，设置为元素宽高的一半时能够显示为圆形 */
            border-radius: 50%;
            /* 设置字体大小 */
            font-size: 400px;
            /* 设置文本对齐方式 为水平居中*/
            /* text-align: center; */
            color: yellow;
            /* 字体颜色 */
            /* 设置行高，当行高与元素本身高度一样时，可以实现文本垂直居中 */
            line-height: 500px;
        }
        #result {
            color: #0ff;
            font-size: 50px;
            font-family: "隶书"
        }
        @keyframes sway{
            0%{
                transform: translate(0,0);
            }
            25%{
                transform: translate(-50px,0);
            }

            50%{
                transform: translate(0px,0);
            }
            75%{
                transform: translate(50px,0);
            }
            100%{
                transform: translate(0,0);
            }
        }
        .err{
            color: red;
            animation: sway 1s linear;
            animation-iteration-count: infinite;
        }
        @keyframes zoomin{
            0%{
                transform: scale(0.2,0.2);
            }
            100%{
                transform: scale(1,1);
            }
        }
        .show{
            animation: zoomin 500ms;
        }
    </style>
</head>

<body>
    <div id="char">
        <div id="inner"></div>
    </div>
    <p id="result">正确0个，错误0个，正确率0%</p>
</body>
<script>
    // 定义两个变量，分别记录正确和错误的数量
    var correct = 0;
    var wrong = 0;
    var oKey = null;
    var result = document.getElementById('result');
    var char = document.getElementById('inner');
    var timer=null;
    document.body.onkeydown = function (e) {
        if(!timer){
            timer=setTimeout(function() {
                alert('时间到')
            },60000)
        }
        if (e.keyCode >= 65 && e.keyCode <= 90) {
            //toUpperCass将字符转为大写
            var input = e.key.toUpperCase()
            if (input == char.textContent) {
                correct++;
                // 如果输入正确，则再次生成一个字母
                creatChar();
                char.classList.add('show')
                setTimeout(function() {
                    // 移除元素的class属性
                    char.classList.remove('show');
                },500);
                // ++表示自增
                correct++;
            }
            else {
                // 为元素添加一个class属性
                char.classList.add('err')
                // 延时执行一次函数，仅一次
                setTimeout(function() {
                    // 移除元素的class属性
                    char.classList.remove('err');
                },500);
                wrong++;
            }
            count();
        }
    }

    //生成随机字母的函数
    function creatChar() {
        //Math.random() 生成一个[0,1)的随机数，可能等于0但不会等于1
        var num = Math.random() * 26;
        num = num + 65;
        //将数字转换为字符
        var ch = String.fromCharCode(num);
        // 把随机生成的字符显示在div中
        char.textContent = ch;
    }
    creatChar();


    // 统计结果
    function count(){
        var rate=correct/(wrong+correct) * 100;
        rate=rate.toFixed(2);
        result.textContent="正确："+correct+"个，错误："+wrong+"个，正确率"+rate+"%";
    }
</script>

</html>